<style type="text/css">
    @media (orientation: landscape){
        #coopList{
            float: left;
            width: 40%;
            height: 100%;
        }
        #coopList input[type=button]{
            display: block;
        }
        #map{
            float: left;
            width: 60%;
            height: 100%;
        }
    }
    @media (orientation: portrait){
        #coopList{
            float: bottom;
            width: 100%;
            height: 40%;
        }
        #coopList input[type=button]{
            display: block;
        }
        #map{
            float: bottom;
            width: 100%;
            height: 60%;
        }
    }
    div#coopList{
        padding: 5px;
    }
    div.mainMenu, div.input-group{
        margin-bottom: 5px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    div.mainMenu{
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #bbb;
    }
    .mainMenuActive{
        background-color: #e6e6e6;
        border-color: #adadad;
    }
    mainMenu{
        width: 100%;
        height: 100%;
        display: block;
        vertical-align: middle;
        text-align: left;
        font-size: 80%;
    }
    div.mainMenu:hover{
        cursor: pointer;
    }
    div#map{
        padding: 5px;
    }
    div#map-canvas{
        width: 100%;
        height: 100%;
    }
</style>
<div id="coopList" style="text-align: center;">
    <div class="whiteShadow" style="overflow: auto;width: 100%;height: 100%;padding: 5px;">
        <div class="input-group input-group-normal">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span>
            </span>
            <input type="text" class="form-control" placeholder="ค้นหา สหกรณ์การเกษตร" onkeyup="showCoop($(this).val())">
        </div>
        <span id="coopButton"></span>
    </div>
</div>
<div id="map">
    <div class="whiteShadow" style="width: 100%;height: 100%;padding: 5px;">
        <div id="map-canvas"></div>
    </div>
</div>

<script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    var locations = [
        ['เกษตรศาสตร์',13.851875, 100.567494]
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        center: new google.maps.LatLng(13.851875, 100.567494),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    
    function codeAddress(address) {
        //var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
    function showCoop(keyword){
        $.post('officer/memberMap/coopButton.php',{
            keyword: keyword
        },function(data){
            $('#coopButton').html(data);
        });
    }
    
    showCoop();
</script>